<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>房间列表</title>
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/template.css ">
</head>
<body>
<style>
div.cmdlist-container img{
	width:100%;
	opacity:1;
	height:12vw;
}
.cmdlist-text p.info,.cmdlist-text{
	color:#fff;
}
.cmdlist-text{
	padding:12px;
}
.layui-badge{
	font-size:15px;
	padding:5px;
	margin: 0px 5px 0px 5px;
}
.layui-cus{
	padding:5px;
	margin-top:10px;
}
.cmdlist-text .price b{
	margin-right:10px;
}
</style>
<div style="text-align: center" class="layui-cus">
<span class="layui-badge layui-bg-blue">空房</span>
<span class="layui-badge layui-bg-green">有客</span>
<span class="layui-badge layui-bg-orange">脏房</span>
<span class="layui-badge layui-bg-red">维修</span>
<span class="layui-badge layui-bg-cyan">锁房</span>
</div>
<div class="layui-fluid layadmin-cmdlist-fluid">
	<div class="layui-row layui-col-space30">
		<c:forEach items="${roomList}" var="a">
			<div class="layui-col-md2 layui-col-sm3 layui-col-xs3">
			    <div class="cmdlist-container<c:if test="${a.status==0 }"> layui-bg-blue</c:if><c:if test="${a.status==1 }"> layui-bg-green</c:if><c:if test="${a.status==2 }"> layui-bg-orange</c:if><c:if test="${a.status==3 }"> layui-bg-red</c:if><c:if test="${a.status==4 }"> layui-bg-cyan</c:if>">
			        <a href="javascript:;">
			        	<img src="${ctxPath}/images/room/room<c:if test="${a.typeId>=1&&a.typeId<=5 }">${a.typeId}</c:if>.jpg"   lay-value="<c:forEach items="${lodgerInfoList}" var="b"><c:if test="${a.roomId==b.roomId }">租客：${b.lodgerName}<br/>客人电话：${b.phone }<br/>客人身份号：${b.certificateNo }<br/>客人订金：${b.deposit }￥<br/>起租日：${b.entryDate }<br/>离租日：${b.leaveDate }<br/>出租天数：${b.days }<br/>操作人员：${b.operatorId }<br/>备注：${b.note }</c:if></c:forEach>">
			        </a>
			        <a href="javascript:;">
						<div class="cmdlist-text">
							<p class="info">No：${a.roomNo}<br/>${a.typeName}</p>
						  	<div class="price">
								<b>￥${a.dayPrice }/天<br/>￥${a.hourPrice }/时</b>
								<span class="flow">
									<i class="layui-icon layui-icon-spread-left"></i>${a.floor}楼
								</span>
						  	</div>
						</div>
			        </a>
			    </div>
			</div>
	  	</c:forEach>
	</div>
</div>
  <script src="${ctxPath}/layuiadmin/layui/layui.js"></script>  
  <script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
  <script>
  layui.config({
    base: '${ctxPath}/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index']);
  layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  console.log("123");
  console.log("${lodgerInfoList}");
});
  
 $(document).on('mouseenter', 'div.layui-fluid.layadmin-cmdlist-fluid > div > div:nth-child(n) > div.layui-bg-green img', function () {
    var roomId = $(this).attr('lay-value');
   	layer.tips(roomId, this, {tips: [3, '#009688'], time: 4000});
})
 $(document).on('mouseenter', 'div.layui-fluid.layadmin-cmdlist-fluid > div > div:nth-child(n) > div.layui-bg-red img', function () {
   	layer.tips("房间需要维修", this, {tips: [3, '#FF5722'], time: 4000});
})
 $(document).on('mouseenter', 'div.layui-fluid.layadmin-cmdlist-fluid > div > div:nth-child(n) > div.layui-bg-orange img', function () {
   	layer.tips("房间需要清洁", this, {tips: [3, '#FFB800'], time: 4000});
})
 $(document).on('mouseenter', 'div.layui-fluid.layadmin-cmdlist-fluid > div > div:nth-child(n) > div.layui-bg-cyan img', function () {
   	layer.tips("房间已上锁", this, {tips: [3, '#2F4056'], time: 4000});
})
 $(document).on('mouseenter', 'div.layui-fluid.layadmin-cmdlist-fluid > div > div:nth-child(n) > div.layui-bg-blue img', function () {
   	layer.tips("房间可入住", this, {tips: [3, '#1E9FFF'], time: 4000});
})
  </script>

</body>
</html>        

